<template>
  <a-row class="emissionTrend panel_box">
    <!-- <div class="title">排放量趋势</div> -->
    <a-col :span="24" :lg="24">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1">
          <span slot="tab" class="title">
            <a-icon type="bar-chart" />
            排放量趋势
          </span>

          <div id="bar" style="width: 100%; height: 350px"></div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab" class="title">
            <a-icon type="area-chart" />
            能耗量
          </span>
          <div class="title">能耗量</div>
          <div id="bar" style="width: 100%; height: 350px"></div>
        </a-tab-pane>
      </a-tabs>
    </a-col>
  </a-row>
</template>

<script>
import { getCarbonEmissions } from "@/api/api.js";
export default {
  name: "EmissionTrend",
  data() {
    return {
      emissionTrend: null,
      energyConsumption: null,
      month: null,
    };
  },
  mounted() {
    getCarbonEmissions().then((res) => {
      //   console.log(res);
      (this.emissionTrend = res.result.emissions),
        (this.month = res.result.month);
      this.drawbar();
    });
  },
  methods: {
    drawbar() {
      let myChart = this.$echarts.init(document.getElementById("bar"));
      var option = {
        title: {
          show: false, //是否显示
          text: "排放量趋势",
          textStyle: {
            color: "#333",
            fontWeight: "bold",
            fontSize: 14,
          },
          padding: 20,
          left: 10,
        },
        grid: {
            top:'30px',
          left: "20px",
          right: "20px",
          bottom: "20px",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.month,
          splitLine: {
            //去除网格线
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#f00", //更改坐标轴颜色
            },

            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#ccc", //更改坐标轴颜色
            },
            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: "#f6f8fb",
              width: 1,
              type: "dashed", //dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            data: this.emissionTrend,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.1)",
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //渐变色在下面修改，这里是透明度
                  [
                    {
                      offset: 0,
                      color: "rgba(147, 212, 253,.95)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(147, 212, 253,.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 212, 253,.2)",
                    },
                  ]
                ),
              },
              emphasis: {
                //悬浮的渐变色在这里
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#93d4fd",
                  },
                  {
                    offset: 0.7,
                    color: "#93d4fd",
                  },
                  {
                    offset: 1,
                    color: "#93d4fd",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.title {
  display: flex;
  font-size: 14px;
  font-weight: 600;
  //   margin-top: 6px ;
}
.panel_box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.emissionTrend {
  margin-bottom: 5px;
}
</style>